const path = require('path');
module.exports = {
  mode:'development',
  entry: path.resolve(__dirname,'./src/idnex.js'),
  output:{
    path:paht.resolve(__dirname,'dist'),
    filename:'[name].js' // 定义一个变量导出
  },
  module:{
    rules:[
      {
        test:/\.(txt|md)$/, // 正则表达式，遇到 .txt 或者是 .md的文件 使用 raw-loader处理
        use: `raw-loader`
      },
      {
        test:/\.m?js$/, // 后缀是 js 或者是 mjs 通过 babel-loader  处理
        exclude: /node_modules/, //排除 node_modules 目录
        use: {
          loader:'babel-loader', // 使用 babel-loader 处理
          options:{ // 是babel-loader的配置项
            presets:[
              ['@babel/preset-env',{
                targets:{chrome:'58',ie:'11'}
              }]// 需要把js转成 chrome 58  ie 11 可以支持的语法
            ]

          }
        }
      },
      {
        test:/\.(png|jpe?g|gif)$/, // 处理的文件后缀
        use: {
          loader: 'url-loader',// 使用url-loader
          options:{ // url-loader的配置项
            // placeholder 占位符【name】源资源模块的名称
            // 【ext】源资源模块的后缀
            name:'[name]_[hash].[ext]',// 打包之后 图片的名称
            // 打包后的存放的位置
            outputPath:'./images',//输出图片的路径
            // 打包后文件的 url
            publicPath:'./images', // 引入 图片的路径
            // 小于 100 字节转成 base64 格式：利用字符串 描述图片的所有像素点。
            limit:100

          }
        }
      },
      {
        test:/\.css$/, // 如果是css后缀的文件通过style-loader和css-loader处理
        // 注意：先css-loader 处理css 在通过 style-loader 添加到html里，use里的多个loader执行顺序是倒序执行
        use: ['style-loader','css-loader']
      },
      {
        test:/\.less$/i,
        use: [
          // use中loader加载是有顺序的，先下后上，注意有的loader需要按照顺序书写
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
}